<template>
	<div class="p-grid">
		<div class="p-col-12">
			<div class="card">
				<h4>显示</h4>
				<p>使用<a href="https://github.com/primefaces/primeflex">PrimeFlex</a> 控制组件的显示效果。</p>

				<h5>inline</h5>
				<InputText class="p-mr-2 p-d-inline" />
				<InputText class="p-d-inline" />

				<h5>Block</h5>
				<InputText class="p-mb-2 p-d-block" />
				<InputText class="p-d-block" />

				<h5>在小屏幕上可见</h5>
				<p>请调整浏览器大小查看。</p>
				<Button type="button" icon="pi pi-bars" class="p-button-rounded p-d-md-none" />

				<h5>在小屏幕上隐藏。</h5>
				<p>请调整大小隐藏。</p>
				<Button type="button" icon="pi pi-search" class="p-button-rounded p-button-success p-d-none p-d-md-inline-flex" />

				<h5>打印可见，屏幕不可见</h5>
				<p class="p-d-none p-print-block">仅当打印时显示</p>

				<h5>屏幕可见，打印不可见</h5>
				<p class="p-d-block p-print-none">不适于打印。</p>
			</div>
		</div>
	</div>
</template>

<script>
</script>
